<template>
	<el-select v-model="value" size='medium' placeholder="项目" :filter-method="remoteProj" value-key="projId" filterable @change="selectProj">
		<el-option v-for="item in options" :key="item.projId" :label="item.name" :value="item">
		</el-option>
	</el-select>
</template>

<script>
	import {list} from '@/api/project.js'
	export default {
		data() {
			return {
				options: [],
				value:''
			}
		},
		created() {
			this.loadList()
		},
		methods:{
			loadList(data){
				var _this = this
				var name = ''
				if (data) {
					name = data
				} else {
					name: ''
				}
				list({
					current: 1,
					size: 20,
					name: name
				},false).then(res => {
					console.log(res)
					_this.options = res.data.records
				})
			},
			remoteProj(query) {
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.loadList(query)
				}, 500);
			},
			selectProj(data) {
				this.$emit('selectProj',data)
				// console.log(data)
				// this.taskForm.mptId = data.mptId
				// this.taskForm.mptName = data.name
			},
			emptyClick(){
				this.value = ''
			}
		},
		
	}
</script>

<style scoped>
	/deep/.el-input--medium .el-input__inner{
		background-color: #f5f6f8;
		border-color: #F5F6F8;
		font-weight: 500;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	/deep/.el-input--medium .el-input__inner:hover{
		background-color: #ecedf0;
	}
	/deep/.el-select{
	  width: 100%;
	}

</style>
